<template>
  <div class="container">
    <div class="mulu">
      <el-row
        type="flex"
        style="width: 100%; height: 40px"
        justify="space-between"
      >
        <el-col :span="12">
          <span style="margin-right: 10px">学科名称</span><el-input v-model="queryPamas.subjectName" style="width: 250px" size="mini" @input="inputValue" />
          <el-button size="mini" style="margin-left: 10px" @click="clear">清除</el-button>
          <el-button size="mini" type="primary" @click="sousu">搜索</el-button>
        </el-col>
        <el-button
          type="success"
          size="mini"
          icon="el-icon-edit"
          @click="showDialog=true"
        >新增学科</el-button>
      </el-row>
      <p class="siz"><i class="el-icon-info" /><span style="margin-left:5px">数据一共有{{ total }}条</span></p>
      <el-table :data="dataTree" style="width: 100%" :header-cell-style="headerCellStyle">
        <el-table-column type="index" label="序号" />
        <el-table-column
          prop="subjectName"
          label="学科名称"
        />
        <el-table-column prop="username" label="创建者" />
        <el-table-column width="200" label="创建日期">
          <template v-slot="{row}">
            <span>{{ timeData(row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
        >
          <template v-slot="{row}">
            <span>{{ row.isFrontDisplay===1?'是':"否" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
        />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="totals" label="题目数量" />
        <el-table-column label="操作" width="270">
          <template v-slot="{row}">
            <el-row type="flex">
              <el-button type="text" @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
              <el-button type="text" @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
              <el-button type="text" @click="getsub(row)">修改</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="delSub(row)"
              >
                <el-button slot="reference" type="text" style="margin-left:10px">删除</el-button>
              </el-popconfirm>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="height: 60px" align="middle">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="total"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryPamas.pagesize"
          :current-page="queryPamas.page"
          @current-change="changePage"
          @size-change="changePagesize"
        />
      </el-row>
    </div>
    <subjects-add ref="subzujina" :show-dialog.sync="showDialog" @addSub="getList" />
  </div>
</template>

<script>
import { list as getList, remove as subremoveRow } from '@/api/hmmm/subjects.js'
import subjectsAdd from '../components/subjects-add.vue'
import moment from 'moment'
export default {
  name: 'Subjects',
  components: {
    subjectsAdd
  },
  data() {
    return {
      // 获取的总数据
      dataTree: [],
      headerCellStyle: {
        backgroundColor: 'rgb(244, 244, 245)', // 设置背景颜色为红色
        color: 'rgba(144, 147, 153)' // 设置文本颜色为白色
      },
      // 分页
      queryPamas: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 分页总数
      total: 10,
      // 声明开关
      showDialog: false
    }
  },
  created() {
    // 获取数据
    this.getList()
  },
  methods: {
    // 调用接口，拿到总数据
    async getList() {
      const {
        data: { items, counts }
      } = await getList(this.queryPamas)
      this.dataTree = items
      this.total = counts
      console.log(this.dataTree)
    },
    // 根据当前页变化，改变数据
    changePage(newPage) {
      this.queryPamas.page = newPage
      this.getList()
    },
    // 改变条数
    changePagesize(newPagesize) {
      this.queryPamas.pagesize = newPagesize
      this.getList()
    },
    // 搜索
    sousu() {
      this.getList()
    },
    // 清除
    clear() {
      this.queryPamas.subjectName = ''
      this.queryPamas.page = 1
      this.getList()
    },
    // 输入框没有值，回到第一页
    inputValue(val) {
      if (val === '') {
        this.queryPamas.page = 1
        this.getList()
      }
    },
    getsub(row) {
      this.$nextTick(async() => {
        await this.$refs.subzujina.detail(row)
        this.showDialog = true
      })
    },
    // 修改数据
    // async getsub (row) {
    // const { data } = await detail(row)
    // this.subUpload = data
    // console.log(this.subUpload)
    // }
    timeData(Date) {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    },
    // 删除
    async delSub(row) {
      console.log(row)
      if (this.dataTree.length === 1 && this.queryPamas.page > 1) this.queryPamas.page--
      await subremoveRow(row)
      this.$message.success('删除成功')
      this.getList()
    }
  }

}
</script>

<style scoped lang='scss'>
.mulu {
  width: 100%;
  background-color: #fff;
  padding: 20px 10px 0 20px;
}
.siz {
  font-size: 16px;
  background-color: rgb(244, 244, 245);
  padding: 10px;
  color: rgba(144, 147, 153);
}
</style>
